<template>
    <div class="frame">
            <el-dialog
            :title=title
            :visible.sync="showOut"
            width="440px"
            :before-close="closeFrame"
            >  
            <div v-if="!ifpassword" class="content ">
                <div class="content-title">{{coinName}}-Wallet</div>
                <div class="content-copy">
                    <span>{{datxDetail.name}}</span>
                    <img src="../../assets/images/copy.png" alt=""
                          v-clipboard:copy="datxDetail.name"
                          v-clipboard:success="onCopy"
                          v-clipboard:error="onError">
                </div>
                <div class="content-input">
                    <div class="balance flex">
                        <div>{{coinName}}</div>
                        <div style="flex:1"></div>
                        <div>{{$t("dt.balance")}}：12. 02131154</div>
                    </div>
                    <div class="transfer flex">
                        <input v-model="amount" type="text" :placeholder="this.$t('dt.transferAmountPlaceholder')">
                        <div style="flex:1"></div>
                          <div>{{unit}}</div>
                    </div>
                    <div class="memo">
                        <input type="text"  :placeholder="this.$t('dt.memoPlaceholder')">
                    </div>
                </div>
                <div class="content-input">
                    <div class="adress">{{$t("dt.receiptAddress")}}</div>
                    <input type="text"  :placeholder="this.$t('dt.receiptAddressPlaceholder')" v-model="to">
                </div>
                <div class="content-button"><button @click="outAccount">{{$t("dt.transferOut")}}</button></div>
            </div>
            <div v-else class="password">
              <p>{{$t("dt.password")}}</p>
              <input type="password"  :placeholder="this.$t('dt.passwordPlaceholder')" v-model="secret">
              <button @click="confirm">{{$t("dt.submiit")}}</button>
            </div>
        </el-dialog>
        </div>
</template>
<script>
  import {sendTrx} from '../../service/datxService'
  import  {selectOuterDatx} from  '../../service/datxService'
  import {validateSecret,getforNumber} from '../../utils/commonUtils'

export default{
    data(){
        return{
          title:"转出",
          datxDetail:{},
          showOut:true,
          ifpassword:false,
          coinName:"BTC",
          from:"" ,//发送者
          to:"bob",  //接受者
          amount:"20 " ,//金额 20.0000 DATX'
          memo:"111" ,// 附加信息
          secret:"cm710068" ,//密码
        }
    },
  props: ["unit"],
  created(){
      this.getMessage()
  },
   methods:{
       getMessage(){
         this.datxDetail = JSON.parse(window.sessionStorage.getItem("walletdetail"))
         if( this.unit=='DBTC'){
           this.coinName="BTC"
         }
         else if(this.unit=='DETH'){
           this.coinName="ETH"
         }
         else if(this.unit=='DEOS'){
           this.coinName="EOS"
         }
         else if(this.unit=='DATX'){
           this.coinName="DATx"
         }
         this.title=this.$t("dt.transferOut")+this.coinName
       },

        // 转入
        closeFrame(){
           this.$emit('outdatxListen',false)
        },

        // 复制成功
        onCopy(){
            this.$message({
                message: this.$t("dt.copySuccess"),
                type: 'success'
                });
        },

        // 复制失败
        onError(){
            this.$message({
                message: this.$t("dt.copydefault"),
                type: 'erro'
                });
        },

        // 转出
        outAccount(){
          this.ifpassword=true;
          this.title=this.$t("dt.verificationPassword");
        },

         confirm(){
           if(validateSecret(this.secret)){
             let obj=selectOuterDatx(this.datxDetail.name,this.secret)
             let privateKey=obj.privateKey
             if(privateKey){
               console.log(this.datxDetail.name,this.to,getforNumber(this.amount)+" "+this.unit,this.memo,privateKey,)
               sendTrx(this.datxDetail.name,this.to,getforNumber(this.amount)+" "+this.unit,this.memo,privateKey,(erro,data)=>{
                 console.log(erro,data)
                 if(!erro){
                   this.$message.success(this.$t("dt.trasferoutSuccess"))
                 }else {
                   this.$message.error(this.$t("dt.trasferoutDefault"))
                 }
               });
             }else {
               this.$message.error(this.$t("dt.privatekeyNoExist"))
             }
           }else {
             this.$message.error(this.$t("dt.passwordDefaule"))
           }
           this.$emit('outdatxListen',false)
         }
    }
}
 
</script>
<style lang="less" scoped>
.frame{
     .flex{
       display: flex;
     }
    .content{
        .content-title{
            text-align: center;
            color: #98889b;
            font-size: 18px;
        }
        .content-copy{
            font-size: 12px;
            color: #666666;
            text-align: center;    
            img{
                width:12px;
                height:14px;
                margin-bottom: -3px;
                cursor: pointer;
            }
        }
        .content-input{
            padding: 10px 20px;
            margin-top: 20px;
            background:#fbfbfc;; 
            color: #666666;
            .balance{
            margin-bottom: 15px;  
            }
            input{
            width: 349px;
            height: 34px;
            padding: 0 10px;
            border-radius: 4px;
            border: solid 1px #eeeeee;
            background-color: #ffffff; 
            }
            input::-webkit-input-placeholder {
            font-size: 12px;
            color: #c5c7cb;   
            }
          .disabled{
            background-color: #f5f7fa;
            border-color: #e4e7ed;
            color: #c0c4cc;
            cursor: not-allowed;
          }
            .transfer{
                padding-bottom: 20px;
                border-bottom: 1px solid #eaedf5;
                div{
                    line-height: 34px;
                }
            }
            .memo{
                padding-top: 20px 
            }
            .adress{
                margin-bottom: 15px;   
            }
        }
        .content-button{ 
            margin: 22px 0;
        button{
            color:#fff;
            width: 400px;
            margin:  0 auto;
            display: block;
            border-radius: 4px;
            line-height:32px;
            text-align: center;
            background-color: #98889b;
            outline: none;
            border: none;
            cursor: pointer;
        }
        button:hover{
            opacity: .8;
         }
        }
    }
    .password{
      padding: 0 20px;
      p{
        color: #666666;
        padding:15px 0;
      }
      input{
        width: 100%;
        height: 34px;
        padding: 0 10px;
        border-radius: 4px;
        border: solid 1px #eeeeee;
        background-color: #ffffff;
      }
      input::-webkit-input-placeholder {
        font-size: 12px;
        color: #c5c7cb;
      }
      button{
        width: 100%;
        margin: 30px 0 10px;
        color: #fff;
        border-radius: 4px;
        text-align: center;
        line-height: 40px;
        background: #98889b;
        outline: none;
        cursor: pointer;
      }
      button:hover{
        opacity: .8;
      }
    }
}
</style>
<style lang="less" >
.frame{
    .el-dialog__wrapper{ 
        .el-dialog{
          border-radius: 8px;
            }
            .el-dialog__header{
                border-bottom:1px solid #eaedf5;
                color:#000000;
                font-size: 18px;
                font-weight: bold;
                padding:20px;
            }
            .el-dialog__body{
                padding:30px 0;
            }
            .el-dialog__headerbtn .el-dialog__close{
                color: #666666;
        }
    }          
}
</style>

